<template>
  <div class="book-container">
     <!-- 头部 -->
     <Header v-show="$route.meta.show"></Header>
     <!-- banner图 -->
     <div class="banner">
      <ul>
        <li><img src="./images/about-banner.png" alt="banner"></li>
      </ul>
    </div>
      <!-- 酒店预订界面 -->
      <div class="hotel-book">
        <div class="location common">
          <h2>酒店预订</h2>
          <p>HOTEL</p>
        </div>
        <hr>
        <div class="fixed-wrapper common">
          <div class="titleBox">
            <h2>
              <div class="box"><span>共有 <em>{{hotelList.length}}</em>家酒店 </span> </div>
            </h2>
            <div class="fillBox">
              <div class="paixu">
                <span>排序：</span>
                <span class="t">酒店名称</span>
                <i class="dot"></i>
              </div>
            </div>

          </div>
          <div class="hotelList common">
            <ul>
              <li v-for="item in hotelList" :key="item.hotel_id">
                <div class="thumb"><a href="#">
                    <img
                      :src="item.hotel_img"
                      alt="">
                  </a></div>
                <div class="content">

                  <h3>{{item.hotel_name}}</h3>
                  <h3 class="eng-Name">LN hotel five</h3>

                  <p class="position">{{item.hotel_address}}</p>
                  <div class="book">
                    <div class="price">
                      <span class="f">￥</span>
                      <span class="c">{{item.hotel_price}}</span>
                      <span class="s">元起</span>
                    </div>
                    <router-link :to="{name:'HotelInfo',query:{id:item.hotel_id}}" class="booking" >立即预定</router-link>
                    <!-- <a href="#" >立即预定</a> -->
                  </div>
                </div>

              </li>

            </ul>
          </div>
        </div>
    </div>
    <Footer v-show="$route.meta.show"></Footer>

  </div>
</template>

<script>
import Header from '@/components/Header/index.vue'
import Footer from '@/components/Footer/index.vue'
import { getHotelList } from '@/api/hotel'

export default {
  name: 'HotelSystemIndex',
  components: {
    Header,
    Footer
  },
  data () {
    return {
      hotelList: [], // 酒店列表
      cityList: [] // 城市列表
    }
  },

  mounted () {
    this.initHotelList()
  },

  methods: {

    async initHotelList () {
      const { data: res } = await getHotelList()
      // console.log(res.data)
      this.hotelList = res.data
    }

  }
}
</script>

<style lang="less" scoped>
.book-container {
  width: 1200px;
  height: 800px;
  margin: 0 auto;
.banner {
  img {
    width: 100%;
  }
}
.hotel-book {

  overflow: hidden;
}
  .common {
    width: 1200px;

    // background-color: lightgreen;
    margin: 50px auto;
  }

  .location {
    h2 {
      overflow: hidden;
      font-size: 30px;
      font-weight: 400;
      padding: 5px 10px 5px 25px;
      float: left;
    }

    h2::after {
      content: "";
      background-color: #01a1ff;
      display: block;
      width: 4px;
      height: 42px;
      margin-left: -10px;
      margin-top: -40px;
    }

    p {
      float: left;
      padding-top: 25px;
    }
  }

  .fixed-wrapper {
    box-sizing: border-box;

    .titleBox {
      overflow: hidden;
      display: flex;
      justify-content: space-between;
      align-items: center;

      h2 {
        float: left;
        // color: #000;
        font-size: 20px;

        .box {
          margin-left: 15px;

          em {

            color: #ba9550;
          }
        }
      }

      .fillBox {
        float: right;
        // background-color: aqua;
        position: relative;

        .paixu {
          width: 161px;
          height: 35px;
          line-height: 45px;
          // margin-top: -10px;
          padding-left: 18px;
          cursor: pointer;

          span {
            float: left;
            font-size: 16px;
          }

          i {
            display: block;
            position: absolute;
            top: 17px;
            right: 30px;
            width: 15px;
            height: 8px;
            background: url('../hotel-book/images/dot3.png') no-repeat;
          }
        }
      }
    }

    .hotelList {
      margin-top: 20px;

      ul {

        // background-color: antiquewhite;
        overflow: hidden;
        padding: 10px;
        display: flex;
        justify-content: space-evenly;
        text-align: center;
        flex-wrap: wrap;
        justify-content: flex-start;

        li {
          float: left;
          width: 280px;
          border: 1px solid #d8d6d6;
          margin-right: 12px;
          margin-bottom: 20px;
          margin-left: 1px;
          background-color: #ededed;

          .thumb img {
            width: 100%;
          }

          .content {
            padding: 20px;
            text-align: left;

            h3 {
              font-size: 18px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }

            .eng-Name {
              height: 20px;
              color: gray;
              font-size: 10px;
            }

            .book {
              .price {
                width: 100%;
                color: #ba9550;
                text-align: right;
                height: 50px;

                .c {
                  font-size: 30px;
                  font-weight: bold;
                }

              }

              a {
                display: block;
                width: 100%;
                background: #298554;
                color: #fff;
                text-align: center;
                margin-top: 5px;
                padding: 10px 0;
                font-size: 18px;
              }

              a:hover {
                text-decoration: none;
                opacity: 0.9;

              }

            }
          }

        }
      }
    }

  }
}
</style>
